import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { LoginForm, ProFormText } from '@ant-design/pro-components';
import { FromContent } from './styles.jsx';
import useUserStore from '@/store/use-user-store.js';

function Login() {
  const onFinish = async (formData) => {
    await useUserStore.getState().login(formData.username, formData.password);
  };

  return (
    <FromContent justify="center" align="center">
      <div className="wave"></div>
      <LoginForm title={import.meta.env.VITE_PAGE_TITLE} subTitle="后台管理" onFinish={onFinish}>
        <ProFormText
          name="username"
          fieldProps={{
            size: 'large',
            prefix: <UserOutlined className={'prefixIcon'} />
          }}
          placeholder={'用户名'}
          rules={[
            {
              required: true,
              message: '请输入用户名'
            }
          ]}
        />
        <ProFormText.Password
          name="password"
          fieldProps={{
            size: 'large',
            prefix: <LockOutlined className={'prefixIcon'} />
          }}
          placeholder={'密码'}
          rules={[
            {
              required: true,
              message: '请输入密码'
            }
          ]}
        />
      </LoginForm>
    </FromContent>
  );
}

export default Login;
